<template>
    <div class="container" :style="{minHeight: screenHeight}">
      <div class="item-box">
        <div>
          <div class="item-box-header">
            <div class="item-box-header-details">
              <div class="item-box-header-icon">
                <img :src="rankingDetail.avatarUrl">
              </div>
              <div class="item-box-header-userDetails">
                <div>
                  <p style="font-size: 28rpx;color: #282828;font-weight: 500;width:50%;display: flex;align-items: center;justify-content: flex-start">
                    <span class="userName">{{ rankingDetail.userName }}</span>
                    <span>（<span style="font-size: 28rpx;color: #24C682;">{{ rankingDetail.signLevel }}</span>）</span>
                  </p>
                  <p style="font-size: 22rpx;color: #999999">{{ rankingDetail.modifyTime }}</p>
                </div>
                <div>
                  <p style="margin-right: 30rpx">
                    总能量：{{ rankingDetail.signTotalCount }}
                  </p>
                  <p>本周打卡{{ rankingDetail.weekSignCount }}次</p>
                </div>
              </div>
            </div>
          </div>
          <div class="item-box-content">
            <div class="item-box-content-title">
              <p>类型：{{ rankingDetail.type }}</p>
              <p>年龄：{{ rankingDetail.age }}</p>
              <p>体重：{{ rankingDetail.weight }}KG</p>
            </div>
            <p class="target">
              目标：{{ rankingDetail.content }}
            </p>
            <div class="item-box-content-imgs">
              <div class="item-box-content-img" v-for="(item,index) in rankingDetail.fileList" :key="index" @click="fnPreviewImage(index,rankingDetail.fileList)">
                <img mode="widthFix" :src="item.webPath">
              </div>
            </div>
            <div class="item-box-content-options">
              <p class="content-options-collect" @click="fnComment">
                <img src="../../../static/image/icon-comment.png">
                <span class="optionNum">评论</span>
              </p>
              <p class="content-options-comment" @click="giveAlike">
                <img src="../../../static/image/icon-like.png" v-if="!hasCollect">
                <img src="../../../static/image/icon-like-active.png" v-else>
                <span class="optionNum">点赞</span>
              </p>
            </div>
          </div>
        </div>

        <scroll-view :scroll-y="scrollY"  class="commentList" @scrolltolower="fnCommentList">
          <div class="comment-item" v-for="(item,index) in listData" :key="index">
            <div class="comment-item-icon">
              <img :src="item.avatarUrl" alt="">
            </div>
            <div class="comment-item-detail">
              <div class="comment-item-title">
                <p class="comment-item-name">{{ item.commentUserName }}</p>
                <p class="comment-item-time">{{ item.modifyTime }}</p>
              </div>
              <p class="comment-item-comment">{{ item.content }}</p>
            </div>
          </div>
          <i-load-more :tip="tip" :loading="lodingShow" />
        </scroll-view>

        <!--消息提示-->
        <i-message id="message" />
      </div>
    </div>
</template>
<script>
    const { $Message } = require('../../../static/iview/base/index');
    export default {
      data(){
            return {
              userInfo:'',   //用户基本信息
              screenHeight: (Number(wx.getSystemInfoSync().windowHeight)) + 'px',
              hasCollect:false,   //已经点赞
              lodingShow:false,  //底部是否显示加载中按钮
              tip:'数据加载中',  //底部按钮显示文字
              id:'',   //签到详情的id
              type:'',  //从哪个页面过来的
              rankingDetail:'',  //签卡详情
              pageNum:1,  //下拉列表，请求第几页的数据
              pageSize:4,   //一页显示多少条
              listData:[],   //评论列表数据
              pageTotal:'',   //总页数
              scrollY:true,  //竖向滚动，是否可滚动
            }
        },
      methods:{
        //点赞函数
        giveAlike(){
            if(this.type == 'homePage'){
              this.hasCollect = !this.hasCollect;
              let status = '';   //点赞状态
              if(this.hasCollect){
                status = 1
              } else {
                status = 0
              }
              this.$httpWX.post({
                url: '/good/insertGoodSign',
                data: {
                  signId:this.id,
                  status:status,
                  userId:this.userInfo.id
                }
              }).then(res => {
                if(res.code == 0){
                  if(this.hasCollect){
                    $Message({
                      content: '点赞成功',
                      type: 'success'
                    });
                  } else {
                    $Message({
                      content: '点赞已取消'
                    });
                  }
                }
              });
            }
        },

        //获取评论列表数据
        fnCommentList(){
          this.lodingShow = true;
          this.tip = '数据加载中';
          this.pageNum++;
          if(Number(this.pageNum) <= Number(this.pageTotal)){
            this.getCommentList();
          } else{
            this.lodingShow = false;
            this.tip = '已经到底啦'
          }
        },

        //获取详细信息
        getdata(){
          this.$httpWX.get({
            url: '/sign/getSignDetail',
            data: {
                id:this.id
            }
          }).then(res => {
            if(res.code == 0){
                this.rankingDetail = res.data;
                //判断当前签卡详情，用户是否已经点过赞
                if(res.data.isGood == 1){
                    this.hasCollect = true;
                } else {
                  this.hasCollect = false;
                }
            }
          });
        },

        //点击评论
        fnComment(){
            if(this.type == 'homePage'){
              wx.navigateTo({
                url: '../comment/main?id='+ this.id
              })
            }
        },

        //获取评论列表
        getCommentList(){
          this.$httpWX.post({
            url: '/comment/getCommentList',
            data: {
              signId:this.id,
              pageNum:this.pageNum,
              pageSize:this.pageSize
            }
          }).then(res => {
            if(res.code == 0){
              this.scrollY = true;
              this.pageTotal = res.data.pageinfo.totalPages;
              if(res.data.content.length == 0){
                this.lodingShow = false;
                this.tip = '暂无评论';
                this.scrollY = false;
                return false;
              }
              this.lodingShow = false;
              this.tip = '数据加载完成';
              if(this.pageNum == 1){
                    this.listData = [];
                    this.listData = res.data.content
                } else {
                  res.data.content.forEach((val)=>{
                    this.listData.push(val)
                  })
                }
            }
          });
        },

        //预览图片
        fnPreviewImage(index,val){
          let imgUrl = [];
          val.forEach((val)=>{
            imgUrl.push(val.webPath)
          });
          wx.previewImage({
            current: imgUrl[index], // 当前显示图片的http链接
            urls: imgUrl            // 需要预览的图片http链接列表
          })
        }
      },

      mounted(){
        this.userInfo = wx.getStorageSync('userInfo'); //获取用户信息
      },
      onShow(){
        this.pageNum = 1;
        this.getdata();
        this.getCommentList();
      },
      onLoad: function(options) {
        this.id = options.id;
        this.type = options.type;
      }
    }
</script>

<style>
  .container{
    width: 100%;
    background-color: #F7F7F7;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }

  .userName{
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  /*列表数据*/
  .item-box{
    width: 94.67%;
    /*height: 602rpx;*/
    margin: 20rpx auto 20rpx auto;
    padding-bottom: 20rpx;
    background-color: white;
    box-shadow:0px 3px 15px 0px rgba(110,128,134,0.1);
    border-radius:10px;
  }
  .item-box-header{
    width: 93%;
    height: 153rpx;
    margin: 0 auto;
    border-bottom: 1rpx solid rgba(231,231,231,1);
    display: flex;
    align-items: center;
  }
  .item-box-header-details{
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: flex-start;
  }
  .item-box-header-icon{
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 27rpx;
  }
  .item-box-header-icon>img{
    width: 100%;
    height: 100%;
  }
  .item-box-header-userDetails{
    width: 81%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .item-box-header-userDetails>div:nth-of-type(1){
    display: flex;
    justify-content: space-between;
  }
  .item-box-header-userDetails>div:nth-of-type(2){
    display: flex;
    margin-top: 15rpx;
    color: #282828;
    font-size: 24rpx;
  }
  .item-box-content{
    width: 93%;
    margin: 30rpx auto 0 auto;
  }
  .item-box-content-title{
    display: flex;
  }
  .item-box-content-title>p{
    flex: 1;
    color: #999999;
    font-size: 24rpx;
  }
  .item-box-content-title>p:nth-of-type(2){
    text-align: center;
  }
  .item-box-content-title>p:nth-of-type(3){
    text-align: right;
  }
  .target{
    font-size:28rpx;
    font-weight:400;
    color:rgba(40,40,40,1);
    line-height:40rpx;
    margin: 24rpx 0 29rpx 0;
  }
  .item-box-content-imgs{
    display: flex;
    /*justify-content: space-around;*/
  }
  .item-box-content-img{
    width: 212rpx;
    margin-right: 10rpx;
    overflow: hidden;
  }
  .item-box-content-img>img{
    width: 100%;
    /*height: 100%;*/
  }
  .item-box-content-options{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20rpx;
  }
  .content-options-collect,.content-options-comment{
    display: flex;
    align-items: center;
  }
  .content-options-comment{
    margin-left: 50rpx;
  }
  .content-options-collect>img{
    width: 33rpx;
    height: 27rpx;
  }
  .content-options-comment>img{
    width: 30rpx;
    height: 30rpx;
  }
  .optionNum{
    display: inline-block;
    margin-left: 14rpx;
    font-size: 22rpx;
    color: #999999;
  }

  /*评论列表*/
  .commentList{
    width: 93%;
    height: 630rpx;
    border-top: 1rpx solid #E7E7E7;
    padding: 0 20rpx 0 20rpx;
    box-sizing: border-box;
    margin: 25rpx auto 0 auto;
  }
  .comment-item{
    width: 100%;
    height: 210rpx;
    padding-top: 35rpx;
    box-sizing: border-box;
    display: flex;
  }
  .comment-item-icon{
    width: 80rpx;
    height: 80rpx;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 22rpx;
  }
  .comment-item-icon>img{
    width: 100%;
    height: 100%;
  }
  .comment-item-detail{
    box-sizing: border-box;
    flex: 1;
    border-bottom: 1rpx solid #EEEEEE;
  }
  .comment-item:last-of-type>.comment-item-detail{
    border-bottom: 0;
  }
  .comment-item-title{
    display: flex;
    justify-content: space-between;
  }
  .comment-item-name{
    font-size:24rpx;
    font-weight:400;
    color:rgba(36,198,138,1);
    line-height:40rpx;
  }
  .comment-item-time{
    font-size:22rpx;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:40rpx;
  }
  .comment-item-comment{
    font-size:26rpx;
    font-weight:400;
    color:rgba(40,40,40,1);
    line-height:40rpx;
    margin-top: 30rpx;
    margin-bottom: 30rpx;
  }
</style>
